<template>
  <view class="order-card" @click="handleClick">
    <view class="order-header">
      <text class="order-number">订单号：{{ order.orderNumber }}</text>
      <text class="order-status" :class="statusClass">{{ orderStatusText }}</text>
    </view>
    
    <view class="order-content">
      <view class="dish-list">
        <view v-for="(dish, index) in displayDishes" :key="index" class="dish-item">
          <image :src="dish.image" class="dish-image" mode="aspectFill" />
          <view class="dish-info">
            <text class="dish-name">{{ dish.name }}</text>
            <text class="dish-count">x{{ dish.quantity }}</text>
          </view>
          <price-display :price="dish.price" :show-symbol="false" />
        </view>
        <text v-if="order.items.length > 2" class="more-dishes">
          共{{ order.items.length }}件商品
        </text>
      </view>
      
      <view class="order-summary">
        <view class="points-earned">
          <u-icon name="heart-fill" color="#ff4757" size="24" />
          <text>获得{{ order.pointsEarned || 0 }}积分</text>
        </view>
        <view class="total-price">
          <text>实付：</text>
          <price-display :price="order.totalPrice" />
        </view>
      </view>
    </view>
    
    <view class="order-footer">
      <text class="order-time">{{ formatDate(order.createdAt) }}</text>
      <view class="order-actions">
        <custom-button
          v-if="order.status === 'pending'"
          text="取消订单"
          type="secondary"
          size="small"
          @click.stop="handleCancel"
        />
        <custom-button
          v-if="order.status === 'ready'"
          text="确认取餐"
          type="primary"
          size="small"
          @click.stop="handleConfirm"
        />
        <custom-button
          v-if="order.status === 'completed'"
          text="再来一单"
          type="primary"
          size="small"
          @click.stop="handleReorder"
        />
      </view>
    </view>
  </view>
</template>

<script>
import CustomButton from '@/components/custom-button/index.vue'
import PriceDisplay from '@/components/price-display/index.vue'
import { formatDate } from '@/utils/format.js'

export default {
  name: 'OrderCard',
  components: {
    CustomButton,
    PriceDisplay
  },
  props: {
    order: {
      type: Object,
      required: true
    }
  },
  computed: {
    displayDishes() {
      return this.order.items.slice(0, 2)
    },
    orderStatusText() {
      const statusMap = {
        pending: '待制作',
        preparing: '制作中',
        ready: '待取餐',
        completed: '已完成',
        cancelled: '已取消'
      }
      return statusMap[this.order.status] || '未知状态'
    },
    statusClass() {
      return `status-${this.order.status}`
    }
  },
  methods: {
    formatDate,
    handleClick() {
      this.$emit('click', this.order)
    },
    handleCancel() {
      this.$emit('cancel', this.order)
    },
    handleConfirm() {
      this.$emit('confirm', this.order)
    },
    handleReorder() {
      this.$emit('reorder', this.order)
    }
  }
}
</script>

<style lang="scss" scoped>
.order-card {
  background: #fff;
  border-radius: 16rpx;
  margin-bottom: 24rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
}

.order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24rpx 32rpx;
  border-bottom: 1rpx solid #f5f5f5;
}

.order-number {
  font-size: 28rpx;
  color: #666;
}

.order-status {
  font-size: 28rpx;
  font-weight: 500;
  
  &.status-pending {
    color: #ff9500;
}
  
  &.status-preparing {
    color: #007aff;
}
  
  &.status-ready {
    color: #34c759;
}
  
  &.status-completed {
    color: #30d158;
}
  
  &.status-cancelled {
    color: #8e8e93;
}
}

.order-content {
  padding: 24rpx 32rpx;
}

.dish-list {
  margin-bottom: 24rpx;
}

.dish-item {
  display: flex;
  align-items: center;
  margin-bottom: 16rpx;
}

.dish-image {
  width: 80rpx;
  height: 80rpx;
  border-radius: 8rpx;
  margin-right: 16rpx;
}

.dish-info {
  flex: 1;
  margin-right: 16rpx;
}

.dish-name {
  font-size: 28rpx;
  color: #333;
  display: block;
}

.dish-count {
  font-size: 24rpx;
  color: #999;
}

.more-dishes {
  font-size: 24rpx;
  color: #999;
  text-align: center;
  display: block;
  margin-top: 16rpx;
}

.order-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 24rpx;
  border-top: 1rpx solid #f5f5f5;
}

.points-earned {
  display: flex;
  align-items: center;
  font-size: 24rpx;
  color: #ff4757;
  
  text {
    margin-left: 8rpx;
}
}

.order-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24rpx 32rpx;
  background: #fafafa;
}

.order-time {
  font-size: 24rpx;
  color: #999;
}

.order-actions {
  display: flex;
   margin-right: 16rpx; &:last-child { margin-right: 0; }
}
</style>